<template>
  <div class="ZYF-realvideo">
    <h3 class="h3">监测站点实时视频监控</h3>
    <a-form-model layout="inline" :model="videoForm" :colon="false">
      <a-form-model-item label="监测站点名称">
        <a-input v-model="videoForm.monitorName" placeholder="请输入监测站点名称" allow-clear/>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="queryBtnFn">查询</a-button>
      </a-form-model-item>
    </a-form-model>
    <div class="video-box">
      <div class="video-left">
        <div class="videop" ref="videoBox">
          <img src="@/assets/烟气视频.png" style="width: 100%;height: 100%" alt="图片"/>
        </div>
        <div class="information">
          <div class="jianlong">
            <p>{{ videoList.monitorName }}</p>
            <!-- <p>2020-06-20 12:00</p> -->
          </div>
          <div class="dizhi">
            <ul>
              <li>所属企业：{{ videoList.companyName }}</li>
              <li class="hidden1">所属服务部：{{ videoList.areaName }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="video-right">
        <ul class="video-list">
          <li class="video-child" v-for="(v,i) in videoData" :key="i"
              :class="[isvideo === v.id ?'border-class':'',!v.isPlay?'hui':'']" @click="onIsvideoFn(v)">
            <img src="@/assets/烟气视频.png" alt/>
            <div class="video-text">
              <p>{{ v.monitorName }}</p>
              <p>{{ v.companyName }}</p>
            </div>
          </li>
        </ul>
        <div class="content-bottom clearfix">
          <div class="page-box">
            <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="videoForm.current" :total="total"
                          :defaultPageSize="videoForm.size" :item-render="itemRender"
                          @change="pagechangeFn"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
// import 'videojs-contrib-hls'
export default {
  name: "VideoModule",
  props:{
    monitorType: {
      type:[String,Number],
      request:true
    }
  },
  data() {
    return {
      isvideo: "", // 是否为选中的视频
      total: 0,
      // 获取视频表单字段
      videoForm: {
        current: 1,
        size: 12,
        // monitorAreaId: "",
        monitorName: "",
        monitorType: ""
      },
      Imge:require("@/assets/烟气视频.png"),
      videoData: [], // 视频数组
      videoList: {}, // 正在播放的视频详情
      v: "",
    };
  },
  methods: {
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return<a > 上一页 < /a>;
      } else if (type === "next") {
        return<a > 下一页 < /a>;
      }
      return originalElement;
    },
    pagechangeFn(page) {
      this.videoForm.current = page;
      this.getVideoData();
    },
    // 搜索按钮
    queryBtnFn() {
      this.videoForm.current = 1;
      this.getVideoData();
    },
    // 右侧视频列表按钮
    onIsvideoFn(data) {
      this.isvideo = data.id;
      this.videoList = data;
      if(data.videoAddress){
        this.$refs.videoBox.innerHTML = "<video ref='myVideo' poster='@/assets/烟气视频.png' language='en' id='my-video' class='video-js vjs-default-skin vjs-big-play-centered'></video>"
        this.$nextTick(()=>{
          let myvideo = document.getElementById("my-video");
          myvideo.style.height="100%";
          myvideo.style.width="100%";
          this.v = videojs(myvideo,{
            autoplay:false,
            controls:true,
            muted:true,
            preload:'auto',
            poster:require("@/assets/烟气视频.png")
          });
          this.v.src([
            {
              type: "application/x-mpegURL",
              src: data.videoAddress,
            },
          ]);
        })

      }else {
        // this.v.dispose()
        this.$refs.videoBox.innerHTML = `<img src='${this.Imge}' alt='图片' style='width: 100%;height: 100%'/>`
      }
    },
    // 获取视频列表方法
    getVideoData() {
      this.videoForm.monitorType = this.monitorType
      this.$api.getMonitorVideoAddress(this.videoForm).then((res) => {
            if (res.data.code == 0) {
              if(res.data.data.length>0){
                res.data.data.forEach(v => {
                  // if(v.videoAddress||v.videoStatus!=2){
                  if (v.videoAddress) {
                    v.isPlay = true;
                  } else {
                    v.isPlay = false;
                  }
                })
                this.$nextTick(() => {
                  this.onIsvideoFn(res.data.data[0]);
                });
              }else {
                this.$message.info("暂无数据！")
              }
              this.videoData = res.data.data;
              this.total = res.data.total;
            } else {
              this.$message.warning(res.data.errorMessage);
            }
          });
    },
  },
  mounted() {
    this.getVideoData();
  },
  beforeDestroy() {
    if(this.v){
      this.v.dispose();
    }
  },
};
</script>

<style scoped lang="scss">
.hui{
  filter: grayscale(100%);
}
.ZYF-realvideo {
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  justify-content: space-between;

  .video-box {
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: space-between;

    .video-left {
      width: 41%;

      .videop {
        width: 100%;
        height: 70%;

        #my-video {
          width: 100%;
          height: 100%;
        }
      }

      .information {
        width: 100%;
        height: 30%;
        display: flex;
        align-items: center;

        .jianlong {
          width: 40%;
          text-align: center;
        }

        p:first-child {
          font-size: 24px;
          font-weight: 600;
          color: #1890ff;
        }

        // p:last-child {
        //     color: rgba(255, 255, 255, 0.7);
        //     font-size: 14px;
        // }
      }

      .dizhi {
        width: 60%;
        color: rgba(0, 0, 0, 0.8);
        line-height: 34px;
      }
    }

    .video-right {
      width: 58%;
      .video-list {
        width: 100%;
        height: 90%;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
      }

      .video-child {
        width: 32%;
        height: 24%;
        position: relative;
        margin: 0 1.3% 1% 0;
        cursor: pointer;
      }

      .video-child:only-child(3n) {
        margin-right: 0;
      }

      .border-class {
        border: 1px solid #1890ff;
        box-sizing: border-box;
      }

      .video-child > img {
        width: 100%;
        height: 100%;
      }

      .video-text {
        width: 100%;
        color: rgba(255, 255, 255, 0.7);
        padding-left: 16px;
        box-sizing: border-box;
        background-color: rgba(38, 63, 62, 0.7);
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
  }
}

/* 分页 */
.content-bottom {
  margin-top: 24px;
  width: 100%;
}

.page-box {
  float: right;
}

.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}

::v-deep.ZYF-realvideo .ant-form-item-control {
  width: 200px;
}

</style>